
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <meta name="author" content="">
    <title>会员统计</title>  <link rel="icon" href="/template/pc1/images/wmh_favicon.ico" type="image/x-icon" />
    <!-- Stylesheets -->
    <link rel="stylesheet" href="https://static.9hive.cn/global/css/bootstrap-extend.min.css?v2.2.0">
    <link rel="stylesheet" href="https://static.9hive.cn/global/vendor/bootstrap-3.3.7/bootstrap.min.css">
    <link rel="stylesheet" href="https://static.9hive.cn/global/vendor/bootstrap-table-1.11/bootstrap-table.min.css?v=1.1">
    <link rel="stylesheet" href="https://static.9hive.cn/global/vendor/bootstrap-select/bootstrap-select.min.css?v2.2.0">
    <link rel="stylesheet" href="https://static.9hive.cn/mmenu/assets/css/site.min.css?v2.2.0">
    <link rel="stylesheet" href="https://static.9hive.cn/global/vendor/common/common_20170925.css">

    <!--[if lt IE 9]>
    <script src="https://static.9hive.cn/global/vendor/html5shiv/html5shiv.min.js"></script>
    <![endif]-->

    <!--[if lt IE 10]>
    <script src="https://static.9hive.cn/global/vendor/media-match/media.match.min.js"></script>
    <script src="https://static.9hive.cn/global/vendor/respond/respond.min.js?v=1.2.3"></script>
    <![endif]-->

</head>
<body>
<div class="ibox">
    <div class="ibox-title">
        <div class="pull-left mbx navbar_title">
            <span>品牌用户 </span>
            <!--<span class="line">/</span> <span>用户列表 </span>-->
            <span class="line">/</span>
            会员统计
        </div>
    </div>
    <div class="ibox-content padding-0">
        <div class="wrapper wrapper-content background-parent">
            <div class="row">
                <div class="col-md-12 clear-both-space ">
                    <div class="div_modle ">
                        <div class="flexed content_between ">
                            <div class="IE-left">
                                <div class="radius_span"></div>
                                <span class="title_span">${companyInfo.brandName!}</span>
                            </div>
                            <div>
                                <span id="today" class="time">今天</span>
                                <span id="yesterday" class="margin-left-16 time">昨天</span>
                                <span id="nearweek" class="margin-left-16 time active">近一周</span>
                                <span id="nearMonth" class="margin-left-16 time">近1个月</span>
                            </div>
                        </div>
                        <div class="margin-top-24 padding-left-20">
                            <img src="${companyInfo.brandLogo!'https://static.9hive.cn/global/img/head.jpg'}" class="width-64 height-64 radius_50p vertical-align-middle">
                            <div class="inline-block vertical-align-middle margin-left-16 flex_child20">
                                <span class=" color_title font-size-18 ">${memberCounts!}人</span>
                                <span class="margin-top-8 color_content font-size-14 block"> 总会员量</span>
                            </div>
                            <div class="inline-block vertical-align-middle margin-left-16 flex_child20">
                                <span class=" color_title font-size-18">2人</span>
                                <span class="margin-top-8 color_content font-size-14 block"> 新增会员</span>
                            </div>
                            <div class="inline-block vertical-align-middle margin-left-16 flex_child20">
                                <span class=" color_title font-size-18">2人</span>
                                <span class="margin-top-8 color_content font-size-14 block">活跃会员</span>
                            </div>

                        </div>
                        <div class="margin-top-8">
                            <div class="margin-left-108">
                                <span class=" color_hint font-size-13 ">普通会员：31</span>
                                <span class="margin-left-16 color_hint font-size-13 ">黄金会员：4</span>
                                <span class="margin-left-16 color_hint font-size-13 ">白金会员：0</span>
                                <span class="margin-left-16 color_hint font-size-13 ">至尊会员：0</span>

                            </div>
                        </div>

                    </div>


                    <!--第二块-->

                    <div class="div_modle margin-top-16">
                        <div class="">
                            <div class="radius_span"></div>
                            <span class="title_span">占比分析</span>
                        </div>
                        <div class="row" style="display: flex;">
                            <div class="col-lg-4" style="flex: 1;">
                                <div class="portlet">
                                    <div class="portlet-heading">
                                        <h5 class="portlet-title">
                                            性别偏向
                                        </h5>
                                    </div>
                                    <div id="portlet1" class="panel-collapse collapse in">
                                        <div class="portlet-body">
                                            <div id="sex" style="width: 100%;height:350px;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-4" style="flex: 1;">
                                <div class="portlet">
                                    <div class="portlet-heading">
                                        <h5 class="portlet-title">
                                            教育程度
                                        </h5>
                                    </div>
                                    <div id="portlet" class="panel-collapse collapse in">
                                        <div class="portlet-body">
                                            <div id="proportion" style="width: 100%;height:350px;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>


                    </div>

                    <div class="div_modle margin-top-16">
                        <div class="">
                            <div class="radius_span"></div>
                            <span class="title_span">城市分析</span>
                        </div>
                        <div id="store_report" class="height-400 width-80p">

                        </div>


                    </div>
                    <!--第三块-->
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://static.9hive.cn/global/vendor/jquery/jquery-2.1.4.min.js"></script>
<script src="https://static.9hive.cn/global/vendor/bootstrap-3.3.7/bootstrap.min.js"></script>
<script src="https://static.9hive.cn/global/vendor/bootstrap-table-1.11/bootstrap-table.min.js"></script>
<script src="https://static.9hive.cn/global/vendor/bootstrap-table-1.11/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="https://static.9hive.cn/global/js/core.min.js"></script>
<script src="https://static.9hive.cn/mmenu/assets/js/site.min.js"></script>
<script src="https://static.9hive.cn/global/vendor/layer/layer.js"></script>
<script src="https://static.9hive.cn/hive/assets/js/random-color.js"></script>
<script src="https://static.9hive.cn/global/vendor/echarts/echarts.js"></script>

<!-- 此js可重写，统计类信息自定义即可-->
<!--<script src="https://static.9hive.cn/hive/assets/js/leaguers.js"></script>-->

<script>
    (function (document, window, $) {
        'use strict';

        var Site = window.Site;
        $(document).ready(function () {
            Site.run();
        });

        var seperator = ".";

        $("#today").on('click', function (event) {
            $('.time').removeClass('active');
            $(this).addClass("active");
            var date = new Date();
            layer.msg(date.getFullYear() + seperator + (date.getMonth() + 1) + seperator + date.getDate());
            event.stopPropagation();
        });

        $("#yesterday").on('click', function (event) {
            $('.time').removeClass('active');
            $(this).addClass("active");
            var date = new Date();
            var yesterday = date.getDate() - 1;
            date.setDate(yesterday);
            layer.msg(date.getFullYear() + seperator + (date.getMonth() + 1) + seperator + date.getDate());
            event.stopPropagation();

        });
        $("#nearweek").on('click', function (event) {
            $('.time').removeClass('active');
            $(this).addClass("active");
            var date = new Date();
            var nowDate = date.getFullYear() + seperator + (date.getMonth() + 1) + seperator + date.getDate();
            var weekday = date.getDate() - 6;
            date.setDate(weekday);
            layer.msg(date.getFullYear() + seperator + (date.getMonth() + 1) + seperator + date.getDate() + "~" + nowDate);
            event.stopPropagation();

        });
        $("#nearMonth").on('click', function (event) {
            $('.time').removeClass('active');
            $(this).addClass("active");
            var date = new Date();
            var nowDate = date.getFullYear() + seperator + (date.getMonth() + 1) + seperator + date.getDate();
            var lastMonth = date.getMonth() - 1;
            date.setMonth(lastMonth);
            layer.msg(date.getFullYear() + seperator + (date.getMonth() + 1) + seperator + date.getDate() + "~" + nowDate);
            event.stopPropagation();
        });

        var sexChart = echarts.init(document.getElementById('sex'));
        var sexContent = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data:['男','女','未知']
            },
            color: ['#37b6ed', '#f5c036','#249D67'],
            series: [
                {
                    name:'性别偏向',
                    type:'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:[
                        {value:20, name:'男'},
                        {value:10, name:'女'},
                        {value:5, name:'未知'},
                    ]
                }
            ]
        };
        sexChart.setOption(sexContent);

        var proportionChart = echarts.init(document.getElementById('proportion'));
        var proportionContent = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data:['小学或初中','高中或大专','本科以上']
            },
            color: ['#37b6ed', '#f5c036','#249D67'],
            series: [
                {
                    name:'性别偏向',
                    type:'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:[
                        {value:0, name:'小学或初中'},
                        {value:0, name:'高中或大专'},
                        {value:0, name:'本科以上'},
                    ]
                }
            ]
        };
        proportionChart.setOption(proportionContent);



        var StoreRepoort = echarts.init(document.getElementById("store_report"));
        var storeReport = {
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                left: '5%',
                right: '5%'
            },
            color: ['#51bff2'],
            toolbox: {
                show: true,
                feature: {
                    restore: {
                        show: true, icon: 'image:///res/img/refresh.svg', title: '刷新',
                        emphasis: {
                            color: '#51BFF2'
                        }
                    },
                    saveAsImage: {
                        show: true, icon: 'image:///res/img/save.svg', title: '保存', name: "门店核销统计", iconStyle: {
                            emphasis: {
                                color: '#2fe1af'
                            }
                        }
                    }
                }

            },
            //x轴
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
            },
            //y轴
            yAxis: {
                type: 'category',
                data: ['上海', '苏州', '盐城', '无锡', '南通']
            },
            series: [{
                name: '核销数',
                type: 'bar',
                data: [15, 10, 5, 4, 1],
                barWidth: 30,
                barMinHeight: 40,
                barGap: 30
            }]


        };
        StoreRepoort.setOption(storeReport);
        //浏览器窗口改变大小调整echarts
        window.onresize = function rs() {
            onlineCountChart.resize();
            StoreRepoort.resize();
        }
    })(document, window, jQuery);

</script>
</body>
</html>